<!doctype html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>下拉菜单</title>
   <style type="text/css">
      body,
      ul,
      li {
         margin: 0;
         padding: 0;
         font-size: 13px;
      }

      ul,
      li {
         list-style: none;
      }

      #divselect {
         width: 186px;
         margin: 80px auto;
         position: relative;
         z-index: 10000;
      }

      #divselect cite {
         width: 150px;
         height: 24px;
         line-height: 24px;
         display: block;
         color: #807a62;
         cursor: pointer;
         font-style: normal;
         padding-left: 4px;
         padding-right: 30px;
         border: 1px solid #333333;
         background: url(xjt.png) no-repeat right center;
      }

      #divselect ul {
         width: 184px;
         border: 1px solid #333333;
         background-color: #ffffff;
         position: absolute;
         z-index: 20000;
         margin-top: -1px;
         display: none;
      }

      #divselect ul li {
         height: 24px;
         line-height: 24px;
      }

      #divselect ul #li{
         background-color: red;
      }

      #divselect ul li a {
         display: block;
         height: 24px;
         color: #333333;
         text-decoration: none;
         padding-left: 10px;
         padding-right: 10px;
      }
   </style>
   <script type="text/javascript">
      window.onload = function () {
         var box = document.getElementById('divselect'),
            title = box.getElementsByTagName('cite')[0],
            menu = box.getElementsByTagName('ul')[0],
            as = box.getElementsByTagName('a'),
            index = -1;



         // 点击三角时
         title.onclick = function (event) {
            event.stopPropagation();
            // 执行脚本
            var _mdisplay = menu.style.display;
            if (_mdisplay === "" || _mdisplay === 'none') {
               menu.style.display = 'block';

            }
            // menu.style.display='block';
            var titleCn = title.firstChild.nodeValue;
            if(!document.getElementById("li")){
               var liis = menu.querySelectorAll("li");
               for(var i=0;i<liis.length;i++){

                  if(titleCn == liis[i].firstChild.firstChild.nodeValue){
                     liis[i].setAttribute("id","li");
                     break;
                  }
                  
               }
            }
            
            

         }

         var lis = menu.querySelectorAll("li");
         for(var i =0;i<lis.length;i++){
            lis[i].onclick = function(event){
               var target = event.target;
               setCiteText(target);
               setIdLi( document.getElementById("li"),target.parentNode);
            }
            lis[i].onmouseenter = function(event){
               var target = event.target;
               if(!target.getAttribute("id")){
                  setIdLi( document.getElementById("li"),target);
               }
               
            }
            lis[i].onmouseleave = function(event){
               var target = event.target;
               target.removeAttribute("id");
            
            }
         }


         

         document.onkeyup=function(event){
             if(menu.style.display === 'block'){
                var _idLiDOM = document.getElementById("li");
                if(!_idLiDOM){
                  document.onclick();
                  return ;
                }
                var _choiceDOM = null;
               if(event.keyCode === 38){
                  _choiceDOM = _idLiDOM.previousElementSibling;
                  if(_choiceDOM){
                     setIdLi(_idLiDOM,_choiceDOM);
                  }else{
                     setIdLi(_idLiDOM,menu.lastElementChild);
                  }
               }else if(event.keyCode === 40){
                  _choiceDOM = _idLiDOM.nextElementSibling;
                  if(_choiceDOM){
                     setIdLi(_idLiDOM,_choiceDOM);
                  }else{
                     setIdLi(_idLiDOM,menu.firstElementChild);
                  }

               }else if(event.keyCode === 13){
                  setCiteText(_idLiDOM.firstChild);
                  document.onclick();
               }
             }  
         }
         // 滑过滑过、离开、点击每个选项时
         
         // 执行脚本

         // 点击页面空白处时
         document.onclick = function (event) {
            var _mdisplay = menu.style.display;
            if (_mdisplay === "block") {
               menu.style.display = 'none';
            }
         }

         // 执行脚本

         function setCiteText(_dom){
            var currentValue =_dom.firstChild.nodeValue;
            title.innerHTML = currentValue;
         }

         function setIdLi(_oldDOM,_newDOM){
            if(_oldDOM){
               _oldDOM.removeAttribute("id");
            }
            if(_newDOM){
               _newDOM.setAttribute("id","li");
            }
         }

      }
   </script>
</head>

<body>
   <div id="divselect">
      <cite>请选择分类</cite>
      <ul>
         <li id="li"><a href="javascript:;" selectid="1">ASP开发</a></li>
         <li><a href="javascript:;" selectid="2">.NET开发</a></li>
         <li><a href="javascript:;" selectid="3">PHP开发</a></li>
         <li><a href="javascript:;" selectid="4">Javascript开发</a></li>
         <li><a href="javascript:;" selectid="5">Java特效</a></li>
      </ul>
   </div>
</body>

</html>